<!DOCTYPE html>
<html>
<head>
<title>首 页</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<base href="">
<link rel="stylesheet" href="css/bone2.css?v=1.4.4">
<link rel="stylesheet" href="font/iconfont.css">
<script src="js/zepto.min.js"></script>
<script src="js/template.js"></script>
<script type="text/javascript">

</script>
<style>
body, section{
  background: #6699FF;
}

.bo-layout-main {
  background: #6699FF;
}

.bo-comment{
  position: relative;
}
.bo-comment .count{
  color:#eee;
  font-size: 38px;
  position: absolute;
  right:20px;
  top:0px;
}

.top{
  background: #6699FF;
  color:#fff;
}

.ana-box{
  background: #fff;
  border-radius: 5px;
  margin: 10px;
  padding: 15px;
}

.ana-line{
  background: #f2f2f2;
  height: 10px;
  line-height: 10px;
  border-radius: 5px;


}

.ana-title{
  font-weight: normal;
  font-size: 16px;
  border-left: 2px #eee solid;

  text-align:left;
  padding-left:15px;
  padding-bottom: 10px;

}

.ana-content{
  border-left: 2px #eee solid;
  padding:0 15px;
  margin-bottom:20px;
}

.ana-line .ana-line-per{
  height: 10px;
  float: left;
  border-radius: 5px;
}

.p{text-align: left;padding:10px 0 0 0;}


.circle-box{
  background: #6699FF;
  width: 130px;
  height: 130px;
  position: relative;
  border-radius: 100%;
  border-right:30px #fff solid;
}

.circle-box .circle{
  position: absolute;

}


</style>

<style>
*{margin: 0;padding: 0;}
.box{width:130px;height:130px;margin:10px auto;position:relative;}
.box div{position:absolute;top:0;left:0;border-radius:50%;height:120px;width:120px;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;}
.box .bg{border:none 6px solid}
.box .bg2{border:#fff 6px solid;clip:rect(0px,60px,60px,0);}
.box .rount{border:#6699FF 6px solid;clip:rect(0,100px,200px,0);-webkit-transform:rotate(0deg);}
.box .rount2{border:#6699FF 6px solid;clip:rect(0,200px,200px,100px);-webkit-transform:rotate(0deg);display:none}
.box .num{padding-top: 40px;;text-align:center;color:#fff; z-index:9;}
.points{width:200px;margin:10px auto;text-align: center;}
</style>
</head>
<body id="app">
  <header class="bo-layout-header  bo-layout-full">
	<div class="bo-header">
		<div class="bo-header-dock-left">
      <a href="user"><i class="icon iconfont icon-back"></i></a>
		</div>
		营养摄入统计
 	</div>
</header>
<section class="bo-layout-main  bo-layout-full" id="list">
  <div class="top">
    <div class="box">
    	<div class="bg"></div>
    	<div id="rount" class="rount"></div>
    	<div class="bg2"></div>
    	<div id="rount2" class="rount2"></div>
    	<div id="num" class="num">今日热量摄入<br> 25%</div>
    </div>
  </div>

  <div class="ana-box">


    <h3 class="ana-title" style="border-left-color:#FF0000">今日摄入蛋白质</h3>
    <div class="ana-content">
      <div class="ana-line">
        <div class="ana-line-per" style="width: 30%;background:#FF0000">
        </div>
      </div>
      <div class="p">
        今日摄入蛋白质30g，推荐摄入100g
      </div>
    </div>

    <h3 class="ana-title" style="border-left-color:#FFC600">今日摄入脂肪</h3>
    <div class="ana-content">
      <div class="ana-line">
        <div class="ana-line-per" style="width: 37%;background:#FFC600">
        </div>
      </div>
      <div class="p">
        今日摄入脂肪10g，建议不超过27g
      </div>
    </div>

    <h3 class="ana-title" style="border-left-color:#6699CC">今日摄入碳水化合物</h3>
    <div class="ana-content">
      <div class="ana-line">
        <div class="ana-line-per" style="width: 25%;background:#6699CC">
        </div>
      </div>
      <div class="p">
        今日摄入碳水化合物100g，推荐400g
      </div>
    </div>
  </div>
</section>

<script type="text/javascript">

</script>

<script>
	function round(){
		var points = document.getElementById('points'),
			rount = document.getElementById('rount'),
			rount2 = document.getElementById('rount2'),
			num = document.getElementById('num');

			var n =25;
			//num.innerHTML = n + "%";
			if(n<=50){
				rount.style.webkitTransform="rotate(" + 3.6*n + "deg)";
				rount2.style.display="none";
			}else{
				rount.style.webkitTransform="rotate(180deg)";
				rount2.style.display="block";
				rount2.style.webkitTransform="rotate(" + 3.6*(n-50) + "deg)";
			}

	}
	round();
</script>
</body>
</html>
